import 'package:flutter/material.dart';

import '../../../../service/enity/media_filter_type.dart';

class MediaListFilter extends StatefulWidget {
  final List<MediaFilterType> filters;

  const MediaListFilter({super.key, required this.filters});

  @override
  _MediaListFilterState createState() => _MediaListFilterState();
}

class _MediaListFilterState extends State<MediaListFilter> {
  Map<String, String?> selectedFilters = {};

  void setFilterSelection(String category, String? option) {
    setState(() {
      if (selectedFilters[category] == option) {
        selectedFilters[category] = null; // Deselect if clicked again
      } else {
        selectedFilters[category] = option; // Set new option as selected
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: widget.filters
          .map((filter) => FilterRow(
                filter: filter,
                selectedOption: selectedFilters[filter.type],
                onOptionSelected: setFilterSelection,
              ))
          .toList(),
    );
  }
}

class FilterRow extends StatelessWidget {
  final MediaFilterType filter;
  final String? selectedOption;
  final Function(String, String?) onOptionSelected;

  const FilterRow({super.key, required this.filter, required this.selectedOption, required this.onOptionSelected});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 4.0),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Expanded(
            child: SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Row(
                children: filter.options
                    .map((option) => FilterOption(
                          filter: filter,
                          option: option,
                          isSelected: selectedOption == option.optionId,
                          onOptionSelected: onOptionSelected,
                        ))
                    .toList(),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class FilterOption extends StatelessWidget {
  final MediaFilterType filter;
  final MediaFilterOption option;
  final bool isSelected;
  final Function(String, String?) onOptionSelected;

  const FilterOption({super.key, required this.filter, required this.option, required this.isSelected, required this.onOptionSelected});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 8.0),
      child: InkWell(
        onTap: () {
          onOptionSelected(filter.type, option.optionId);
        },
        child: Container(
          height: 25.0,
          padding: const EdgeInsets.symmetric(horizontal: 5.0, vertical: 2.0),
          decoration: isSelected
              ? BoxDecoration(
                  border: Border.all(color: Colors.blue),
                  borderRadius: BorderRadius.circular(8.0),
                  color: Colors.white30,
                )
              : const BoxDecoration(),
          child: Text(
            option.optionName,
            style: TextStyle(
              color: isSelected ? Colors.blue : Colors.black,
            ),
          ),
        ),
      ),
    );
  }
}
